<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>米事见 - 热点舆情监测平台</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="static/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="static/css/style.css" rel="stylesheet" type="text/css">
    <!-- DataTables -->
    <link href="static/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class="header-bg">
        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">

                    <!-- Logo-->
                    <div>
                        <a href="#" class="logo">
                            <img src="static/picture/logo-mi.png" class="logo-lg" alt="" height="60">
                        </a>
                    </div>
                    <!-- End Logo-->

                    <div class="menu-extras topbar-custom navbar p-0">

                        <!-- Search input -->
                        <div class="search-wrap" id="search-wrap">
                            <div class="search-bar">
                                <input class="search-input" type="search" placeholder="Search">
                                <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                    <i class="mdi mdi-close-circle"></i>
                                </a>
                            </div>
                        </div>

                        <ul class="navbar-right ml-auto list-inline float-right mb-0">

                            <!-- full screen -->
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <i class="fas fa-expand noti-icon"></i>
                                </a>
                            </li>

                          

                            <li class="dropdown notification-list list-inline-item">
                                <div class="dropdown notification-list nav-pro-img">
                                    <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user" href="http://localhost:3000" role="button" aria-haspopup="false" aria-expanded="false">
                                        <img src="static\picture\ai.png" alt="user" class="rounded-circle">
                                    </a>
                                    
                                </div>
                            </li>

                            <li class="menu-item dropdown notification-list list-inline-item">
                                <!-- Mobile menu toggle-->
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <!-- End mobile menu toggle-->
                            </li>

                        </ul>

                    </div>

                    <div class="clearfix"></div>

                </div>
                <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <!-- start content -->
            <div class="bg-dark">
                <div class="container-fluid">
                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">意见领袖</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">首页</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">内容分析</a>
                                    </li>
                                    <li class="breadcrumb-item active">意见领袖</li>
                                </ol>
                            </div>
                        </div>

                        <div class="col-md-4 d-flex flex-row">
                            <div class="col-md-6 align-self-center" style="color:aliceblue">
                                <h6>查询每日详情:</h6>
                            </div>
                            <div class="float-right d-none d-md-block app-datepicker ml-auto">
                                <input type="text" class="form-control" data-date-format="MM dd, yyyy" readonly="readonly" id="datepicker">
                                <i class="mdi mdi-chevron-down mdi-drop"></i>
                            </div>
                        </div>
                    </div>

                    <div class="row top-content">
                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">话题总数</h5>
                                    <h4 class="text-info pt-1 mb-0"><div id="count_contents"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart1"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">评论总数</h5>
                                    <h4 class="text-warning pt-1 mb-0"><div id="count_comment"></div></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">转发总数</h5>
                                    <h4 class="text-primary pt-1 mb-0"><div id="count_repost"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart3"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">

                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">点赞总数</h5>
                                    <h4 class="text-danger pt-1 mb-0"><div id="count_like"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end content -->

            <!-- MENU Start -->
            <div class="navbar-custom">
                <div class="container-fluid">

                    <div id="navigation">

                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="index.html"><i class="dripicons-meter"></i> 首页</a>
                            </li>

                            <li class="has-submenu">
                                <a href="contents.html"><i class="dripicons-briefcase"></i> 内容分析</a>
                                <ul class="submenu">
                                            <li><a href="contents.html">帖子</a></li>
                                            <li><a href="topicresearch.html">话题</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="blogger.html"><i class="dripicons-broadcast"></i> 权威博主</a>
                                <!-- <ul class="submenu">
                                            <li><a href="blogger.html">权威博主</a></li>
                                            <li><a href="sentiment-graph.html">舆情拓扑</a></li>
                                </ul> -->
                            </li>

                            <li class="has-submenu">
                                <a href="user.html"><i class="dripicons-view-thumb"></i> 用户分析</a>
                                <!-- <ul class="submenu">
                                            <li><a href="user.html">用户分析</a></li>
                                            <li><a href="#">暂无</a></li>
                                            <li><a href="#">暂无</a></li>
                                </ul> -->
                            </li>
                        </ul>
                        <!-- End navigation menu -->
                    </div>
                    <!-- end #navigation -->
                </div>
                <!-- end container -->
            </div>
            <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->

    </div>
    <!-- header-bg -->
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                    <h4 class="mt-0 header-title">意见领袖TOP榜</h4>
                    <p class="sub-title">根据数据分析得出最权威博主或媒体
                    </p>

                    <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                        <tr>
                            <th>博主名称</th>
                            <th>博主IP</th>
                            <th>博主称号</th>
                            <th>博主类别</th>
                            <th>粉丝量</th>
                            <th>热度指数</th>
                        </tr>
                        </thead>
                        <tbody id="datatable-body">
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
        </div>
        
        <!-- end col -->
    </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title">意见领袖类别饼图</h4>
                            <div id="typechart" style="width: 1100px; height: 600px;margin: auto; "></div>
                        </div>
                    </div>
                <!-- end col -->

                <!-- <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">情感占比饼图</h4>
                            <p class="sub-title d-inline-block text-truncate w-100">Pie chart is used to see the proprotion of each data groups, making Flot pie chart is pretty simple, in order to make pie chart you have to incldue jquery.flot.pie.js plugin.</p>

                            <ul class="list-inline widget-chart mt-4 mb-3 text-center">
                                <li class="list-inline-item">
                                    <h5>3654</h5>
                                    <p class="text-muted">Marketplace</p>
                                </li>
                                <li class="list-inline-item">
                                    <h5>954</h5>
                                    <p class="text-muted">Last week</p>
                                </li>
                                <li class="list-inline-item">
                                    <h5>8462</h5>
                                    <p class="text-muted">Last Month</p>
                                </li>
                            </ul>

                            <div id="pie-chart">
                                <div id="pie-chart-container" class="flot-chart" style="height: 300px">
                                </div>
                            </div>

                        </div>
                    </div>
                </div> -->
                <!-- end col -->
            </div>

            <!-- end row -->

        </div>

        <!-- end container-fluid -->
    </div>
    <!-- end wrapper -->

    <!-- Footer -->
    <!-- <footer class="footer">
        Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </footer> -->

    <!-- End Footer -->

    <!-- jQuery  -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/jquery.slimscroll.js"></script>
    <script src="static/js/waves.min.js"></script>

    <script src="static/js/apexcharts.min.js"></script>
    <script src="static/js/bootstrap-datepicker.min.js"></script>

    <!-- Required datatable js -->
    <script src="static/js/jquery.dataTables.min.js"></script>
    <script src="static/js/dataTables.bootstrap4.min.js"></script>>
    <!-- Responsive examples -->
    <script src="static/js/dataTables.responsive.min.js"></script>
    <script src="static/js/responsive.bootstrap4.min.js"></script>

    <!-- Datatable init js -->
    <!-- <script src="static/js/datatables.init.js"></script> -->


    <!-- App js -->
    <script src="static/js/app.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/echarts.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
    // 找到日期选择器的元素
    const datepickerInput = document.getElementById('datepicker');

    // 设置日期为5月8日
    datepickerInput.value = 'May 08, 2024'; // 根据你的日期格式进行设置

    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'MM dd, yyyy' // 日期格式要与显示格式一致
    });

    // 加载5月8日对应的数据
    loadData('2024-05-08');

    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });
});
        // const countDate = '2024-05-08'
        document.addEventListener("DOMContentLoaded", function() {
    const datepickerInput = document.getElementById('datepicker');
    
    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'yyyy-mm-dd' // 日期格式要与后端API期望的格式一致
    });
    
    // 获取默认日期
    // const defaultDate = getDefaultDate();
    const defaultDate = '2024-05-08';
    
    // 加载默认日期对应的数据
    loadData(defaultDate);
    
    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });
    
    // 获取默认日期的函数
    function getDefaultDate() {
        const today = new Date();
        const year = today.getFullYear();
        const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份补零
        const day = today.getDate().toString().padStart(2, '0'); // 日补零
        return `${year}-${month}-${day}`;
    }
    
    // 加载数据的函数
    function loadData(date) {
        const apiUrl = `http://localhost:8080/hot/countlist?Date=${date}`;
    
        // 发起GET请求获取数据
        axios.get(apiUrl)
            .then(response => {
                const countList = response.data[0];
    
                // 更新页面上对应的数据显示
                updateDataDisplay(countList);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                // 处理请求错误
                const emptyData = {
                    count_comment: 0,
                    count_repost: 0,
                    count_like: 0,
                    count_contents: 0
                };
                updateDataDisplay(emptyData);
            });
    }
    
    // 更新数据显示的函数
    function updateDataDisplay(data) {
        const commentElement = document.getElementById('count_comment');
        const repostElement = document.getElementById('count_repost');
        const likeElement = document.getElementById('count_like');
        const contentsElement = document.getElementById('count_contents');
    
        commentElement.innerText = data.count_comment || 0;
        repostElement.innerText = data.count_repost || 0;
        likeElement.innerText = data.count_like || 0;
        contentsElement.innerText = data.count_contents || 0;
    }
    });
    
    </script>

    <script>
        // 使用 Axios 获取数据
        axios.get('http://localhost:8080/hot/typecount')
            .then(response => {
                const chartData = response.data;
                // 初始化其他类别的计数
                let otherCount = 0;

                // 处理数据：将 typecount < 100 的 user_type 合并为 "其他"
                const processedData = chartData.reduce((acc, item) => {
                    if (item.typecount >= 1) {
                        acc.push({ name: item.user_type, value: item.typecount });
                    } else {
                        otherCount += item.typecount;
                    }
                    return acc;
                }, []);

                // 添加合并后的 "其他" 类别
                if (otherCount > 0) {
                    processedData.push({ name: '其他', value: otherCount });
                }

                // 渲染饼图
                const chartDom = document.getElementById('typechart');
                const chart = echarts.init(chartDom);

                chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)',
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 40,
                        top: 20,
                        bottom: 20,
                        data: processedData.map(item => item.name),
                        formatter: function (name) {
                            // 可根据具体需求调整省略长度
                            const maxLength = 10; // 设置最大显示长度为10个字符
                            if (name.length > maxLength) {
                                return name.slice(0, maxLength) + '...'; // 超过长度的部分用省略号代替
                            }
                            return name;
                        },
                    },
                    series: [
                    {
                    name: '用户类型',
                    type: 'pie',
                    radius: '65%',
                    center: ['40%', '50%'],
                    data: processedData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
  ],
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    </script>
    <script>
        // 使用 Axios 发送 GET 请求获取数据
        axios.get('http://localhost:8080/hot/topuser')
            .then(function (response) {
                const data = response.data; // 获取返回的数据
                const tableBody = document.getElementById('datatable-body');
    
                // 清空现有的表格内容
                tableBody.innerHTML = '';
    
                // 遍历返回的数据，生成表格行并填充到页面中
                data.forEach(function (item) {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${item.user_name}</td>
                        <td>${item.ip}</td>
                        <td>${item.official_type}</td>
                        <td>${item.user_type}</td>
                        <td>${item.followers}K</td>
                        <td>${item.hotness}</td>
                    `;
                    tableBody.appendChild(row);
                });
            })
            .catch(function (error) {
                console.error('Error fetching data:', error);
            });
    </script>

</body>

</html>